<template>
  <div v-if="visible" class="set-box">
    <h3 class="set-title">轮播图</h3>
    <el-form :model="swiperForm" ref="swiperForm" label-width="76px">
      <div class="set-part img-part">
        <h4 class="form-title">添加图片</h4>
        <div class="title-tip">最多添加10个广告，鼠标拖拽调整广告顺序，建议宽度750像素</div>
        <ul v-if="swiperForm.imgList.length"  class="img-warp">
          <draggable v-model="swiperForm.imgList" :options="swiperOptions" class="swiper-list">
            <li class="img-item"
              v-for="(item, index) in swiperForm.imgList"
              :key="index">
              <div class="item-box">
                <div class="img-box">
                  <img :src="item.imgUrl" />
                  <div class="modify-img" @click="imageUpload(index, item)">更换图片</div>
                </div>
                <div class="img-item-content">
                  <el-form-item label-width="45px" label="标题" :prop="`imgList.${index}.title`">
                    <el-input
                      :minlength="minlength"
                      :maxlength="maxlength"
                      placeholder="建议10个字以内，可不填"
                      v-model="item.title">
                    </el-input>
                  </el-form-item>
                  <el-form-item label-width="45px" label="链接">
                    <div class="val-show">
                      <en-url-picker
                        :defaultData="item.opt"
                        @confirm="handleUrlIndex($event, index)"/>
                    </div>
                  </el-form-item>
                </div>
              </div>
              <div class="item-delete">
                <i class="el-icon-close" @click="swiperForm.imgList.splice(index, 1)"></i>
              </div>
            </li>
          </draggable>
        </ul>
        <div v-if="swiperForm.imgList.length < 11" class="add-button">
          <el-button plain @click="imageUpload()"><i class="el-icon-plus"></i>添加背景图</el-button>
        </div>
      </div>
      <div class="set-part">
        <el-form-item class="pt20 bd-t" label="图片倒角" prop="radius">
          <div class="flex">
            <div class="val-show flex-1">{{swiperForm.radius | filterRadio(radiusOption)}}</div>
            <en-radio-tab
              :optionsData="radiusOption"
              :defaultData="swiperForm.radius"
              v-model="swiperForm.radius">
            </en-radio-tab>
          </div>
        </el-form-item>
        <el-form-item label="页面边距" prop="pagePadding">
          <el-slider class="row-slider" :min="0" :max="30" v-model.number="swiperForm.pagePadding"></el-slider>
          <el-input class="row-input" v-model.number="swiperForm.pagePadding"></el-input>
        </el-form-item>
        <el-form-item label="图片边距" prop="imgPadding">
          <el-slider class="row-slider" :min="0" :max="30" v-model.number="swiperForm.imgPadding"></el-slider>
          <el-input class="row-input" v-model.number="swiperForm.imgPadding"></el-input>
        </el-form-item>
        <!-- <el-form-item label="指示器" prop="radius">
          <div class="flex">
            <div class="val-show flex-1">{{swiperForm.radius}}</div>
            <en-radio-tab
              :optionsData="radiusOption"
              :defaultData="swiperForm.radius"
              v-model="swiperForm.radius">
            </en-radio-tab>
          </div>
        </el-form-item> -->
      </div>
    </el-form>
      <el-button type="primary" @click="handleConfirm">数据提交</el-button>

    <!-- 图片上传 -->
    <en-image-picker
      :show="dialogImageShow"
      :default-data="defaultImageUrl"
      @close="dialogImageShow = false"
      @confirm="handleImagePickerConfirm"
      :limit="1"
    />
  </div>
</template>

<script>
  import mixin from '../../mixin';
  import draggable from 'vuedraggable'
  import * as API_Floor from '@/api/floor'
  import * as API_Category from '@/api/category'

  export default {
    name: 'EnSwiperPicker',
    mixins: [mixin],
    components: { draggable },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      // 默认数据
      defaultData: {
        type: Object,
        default: {}
      },
      // 标题最小长度
      minlength: {
        type: Number,
        default: 0
      },
      placeholder: {
        type: String,
        default: '请输入关键字'
      },
      // 标题最大程度
      maxlength: {
        type: Number,
        default: 10
      }
    },
    data() {
      return {
        dialogImageShow: false,
        defaultImageUrl: undefined,
        currentIndex: undefined,
        visible: this.show,
        swiperForm: {
          imgList: [],
          radius: 0,
          pagePadding: 0,
          imgPadding: 0
        },
        /** 图片配置 */
        swiperOptions: {
          animation: 150,
          sort: true,
          handle: '.img-item'
        },

        radiusOption: [{
          value: 0,
          label: '直角',
          icon: 'fonticon-radius-no'
        },{
          value: 4,
          label: '圆角',
          icon: 'fonticon-radius-yes'
        }],

        dialogGoodsShow: false,
        dialogMiniPages: false,
        dialogGoodsCat: false,
        miniPageData: [],
        goodsCatData: [],
        searchGoodsName: undefined,
        currentItem: undefined
      }
    },
    watch: {
      show(newVal) {
        this.visible = newVal
      },
      visible(newVal) {
        newVal === false && this.$emit('close')
      },
      defaultData(newVal) {
        if (!newVal) {
          return;
        };
        let _showData = JSON.parse(JSON.stringify(newVal));
        let _imgList = [];
        _showData.data.forEach(item=>{
          if (item.block_value && item.block_value.img_url) {
            let _imgItem = {
              imgUrl: item.block_value.img_url,
              title: item.block_value.img_title
            };
            if (item.block_opt) {
              _imgItem.opt = {
                type: item.block_opt.opt_type,
                name: item.block_opt.opt_name,
                value: item.block_opt.opt_value
              }
            };
            _imgList.push(_imgItem);
          };
        });
        this.swiperForm = {
          'imgList': _imgList,
          ..._showData.style
        };
      }
    },
    methods: {
      /**
       * 选择图片
       */
      imageUpload(_index, _item) {
        this.currentIndex = _index;
        this.currentItem = _item;
        if (_item) {
          this.defaultImageUrl = [{url:_item.imgUrl}];
        };
        this.dialogImageShow = true;
      },
      /*
        * @date 2020-01-18
        * @author wolfMan
        * @description {图片上传}
      */
      handleImagePickerConfirm(fileList) {
        const file = fileList[0];
        const _currentIndex = this.currentIndex;
        let _listItem = {
          imgUrl: file.response.url,
          title: undefined,
          opt: {}
        };
        if (_currentIndex || _currentIndex === 0) {
          const _currentItem = this.currentItem;
          _listItem.title = _currentItem.title;
          _listItem.opt = _currentItem.opt;
          this.$set(this.swiperForm.imgList, _currentIndex, _listItem);
        } else {
          this.swiperForm.imgList.push(_listItem);
        }
      },
      handleUrlIndex (_opt, _index) {
        let _item = this.swiperForm.imgList[_index];
        _item.opt = _opt;
        this.$set(this.swiperForm.imgList, _index, _item);
      },
      /**
       * 数据提交
       * block_type: '图片地址', block_value: '名称', block_opt: ''
       */
      handleConfirm() {
        this.$refs['swiperForm'].validate((valid) => {
          if (valid) {
            let _formValue = {
              itemList: this.swiperForm.imgList,
              style:{
                radius: this.swiperForm.radius,
                pagePadding: this.swiperForm.pagePadding,
                imgPadding: this.swiperForm.imgPadding
              }
            };
            this.$emit('confirm', _formValue);
          } else {
            this.$message.error('表单填写有误，请核对！')
            return false
          }
        })
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .goods-image {
    width: 50px;
    height: 50px;
  }
  .img-part {
    padding-bottom: 20px;
    .img-warp {
      list-style: none;
      padding: 12px 20px 0 20px;
      margin: 0 -20px;
      background: #f2f2f2;
      .img-item {
        position: relative;
        border-radius: 2px;
        background-color: #fff;
        box-shadow: 0 0 4px 0 rgba(10,42,97,.2);
        cursor: move;
        & + .img-item {
          margin-top: 12px;
        }
        /deep/ .el-form-item {
          margin-bottom: 0;
          .el-form-item__label {
            padding-right: 10px;
            color: #333;
          }
          .val-show {
            margin: 4px 0;
            line-height: 24px;
          }
        }
        .item-box {
          display: flex;
          padding: 12px;
        }
        .img-box {
          flex-grow: 0;
          position: relative;
          width: 60px;
          height: 60px;
          border: 1px solid #e5e5e5;
          text-align: center;
          overflow: hidden;
          background: #f2f4f6;
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
          .modify-img {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            line-height: 18px;
            text-align: center;
            cursor: pointer;
            background: rgba(0, 0, 0, .5);
            color: #fff;
            font-size: 12px;
          }
        }
        .img-item-content {
          flex: 1;
        }
        .item-delete {
          position: absolute;
          top: -10px;
          right: -10px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 20px;
          height: 20px;
          border-radius: 10px;
          cursor: pointer;
          background: #CACACA;
          color: #fff;
          font-size: 14px;
        }
      }
    }
    .add-button {
      padding: 10px 20px;
      margin: 0 -20px;
      background: #f2f2f2;
      .el-button {
        position: relative;
        padding: 0 20px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        border: solid 1px #3870EA;
        box-sizing: border-box;
        border-radius: 4px;
        color: #3870EA;
        &:hover,
        &:focus {
          background: rgba(56, 112, 234, .1);
        }
        i {
          position: absolute;
          top: 1px;
          left: 18px;
          line-height: 38px;
          font-size: 16px;
          font-weight: 700;
        }
      }
    }
  }
  .right-submit {
    text-align: center;
  }
</style>
